import React from "react"
import Link from "next/link"
import { Zap } from "lucide-react"
import { Button } from "../../ui/button"
import ThemeToggle from "../../theme/theme-toggle"

/**
 * 首页顶部导航栏
 */
const HomeHeader = () => {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background-primary/90 backdrop-blur-sm border-b border-header-border">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center space-x-3">
            <div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
              <Zap className="text-white w-6 h-6" />
            </div>
            <h1 className="text-xl font-bold text-text-primary">Flow Forge</h1>
          </div>

          <nav className="hidden md:flex items-center space-x-8">
            <Link href="/" className="text-text-secondary hover:text-text-primary font-medium">
              功能特性
            </Link>
            <Link href="/" className="text-text-secondary hover:text-text-primary font-medium">
              应用案例
            </Link>
            <Link href="/" className="text-text-secondary hover:text-text-primary font-medium">
              价格方案
            </Link>
          </nav>

          <div className="flex items-center space-x-3">
            <ThemeToggle />
            <Button className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white">
              开始使用
            </Button>
          </div>
        </div>
      </div>
    </header>
  )
}

export default HomeHeader
